<template>
  <div id="report">
    <!-- 右上角的新增与搜索 -->
    <!-- <div class="right-menu">
      <div class="addButton" @click="addShow = true">
        <span>导出偏移数据</span>
      </div>
    </div> -->
    <!-- 导出弹窗 -->
    <!-- <el-dialog
      title="导出偏移数据"
      :visible.sync="addShow"
      width="620px"
      top="20vh"
    > -->
    <!-- <export-form />
    </el-dialog> -->
    <div id="left">
      <div class="l_header">
        <div class="l_box box1">
          <div class="box_img">
            <img src="@/assets/pic/ic_report_warn@2x.png">
          </div>
          <div class="box_right">
            <div class="box_num">{{ deviceTop.warring }}</div>
            <div class="box_font">近日告警</div>
          </div>
        </div>
        <div class="l_box box2">
          <div class="box_img">
            <img src="@/assets/pic/ic_report_warn2@2x.png">
          </div>
          <div class="box_right">
            <div class="box_num">{{ deviceTop.deviceNum }}</div>
            <div class="box_font">设备总数</div>
          </div>
        </div>
        <div class="l_box box3">
          <div class="box_img">
            <img src="@/assets/pic/ic_report_warn3@2x.png">
          </div>
          <div class="box_right">
            <div class="box_num">{{ deviceTop.deviceOnline }}</div>
            <div class="box_font">设备在线</div>
          </div>
        </div>
      </div>
      <div class="l_main">
        <div class="l_mainTitle">
          <p>设备列表</p>
        </div>
        <div class="l_main_content">
          <el-table :data="tableData" border height="100%" style="width: 100%">
            <el-table-column prop="id" label="序号" width="80" align="center" />
            <el-table-column prop="deviceName" label="设备名" align="center" />
            <el-table-column prop="lng" label="设备经度" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.lng === null ? "暂无" : scope.row.lng }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="lat" label="设备纬度" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.lat === null ? "暂无" : scope.row.lat }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="online" label="设备在线情况" align="center">
              <template slot-scope="scope" align="center">
                <span>{{ scope.row.online === 0 ? "离线" : "在线" }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="address" label="地址"> </el-table-column> -->
          </el-table>
        </div>
      </div>
    </div>
    <div id="right">
      <!-- <div class="r_header">
        <p>设备本周告警信息统计</p>
        <div v-if="warnList.length" class="r_allProgress">
          <div v-for="(item, index) in warnList" :key="index" class="Progress">

          </div>
        </div>
        <div v-else class="noScene">暂无数据</div>
      </div> -->
      <div class="r_main">
        <p class="title">设备统计</p>
        <div class="r_mainAll">
          <div class="r_mainBox green">
            <p class="green">{{ deviceTop.deviceOnline }}</p>
          </div>
          <div class="r_mainBox orange">
            <p class="orange">{{ deviceTop.deviceUnline }}</p>
          </div>
        </div>
        <div class="r_mainTitle">
          <div class="r_mainonline">
            <div class="radiusG" />
            <i class="green">&nbsp;&nbsp;在线</i>
          </div>
          <div class="r_mainonline">
            <div class="radiusO" />
            <i class="orange">&nbsp;&nbsp;不在线</i>
          </div>
        </div>
      </div>
      <div class="r_bottom">
        <p class="r_bottomTitle">告警统计</p>
        <div ref="echarts_mains" class="echarts_main">
          <AllEchartsWarn
            :main-width="mainWidth"
            :main-height="mainHeight"
            :warning-data="warningData"
            @allWarnEcharts="allWarnEcharts"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ExportForm from './components/ExportForm'
import allEchartsWarn from './components/allEchartsWarn'
import separateEcharts from './components/separateEcharts'
import { setInterval } from 'timers'
import { get_error_by_day, get_all_device, get_device_list } from '@/api/chart'
// import { getReport } from "@/api/report.js";
export default {
  components: {
    AllEchartsWarn: allEchartsWarn,
    SeparateEcharts: separateEcharts,
    ExportForm
  },
  data() {
    return {
      listquery: {
        size: 10,
        page: 1
      },
      addShow: false,
      sceneNum: 0, // 场景总计
      warnNum: 0, // 告警总计
      equipmentNum: 0, // 设备总计
      warnList: [
        { sceneName: '宁波场景', sceneNum: 12 },
        { sceneName: '台州场景', sceneNum: 10 },
        { sceneName: '温州场景', sceneNum: 8 }
      ],
      numMax: 1,
      electricMax: 0,
      lowElectric: 20, // 改完接口删 null
      midElectric: 50, // 改完接口删 null
      highElectric: 70, // 改完接口删 null
      mainWidth: null, // 监听mainEcharts适配
      bottomWidth: null,
      bottomHeight: null,
      _allWarnEcharts: null,
      _separateEcharts: null,
      mainHeight: null,
      deviceTop: {
        warring: null,
        deviceNum: null,
        deviceOnline: null,
        deviceUnline: null
      },
      warningData: [],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      total: 0
    }
  },
  watch: {
    // mainWidth(n) {
    //   this.mainWidth = n
    //   //   this.allWarnEcharts.resize
    // },
    // bottomWidth(n) {
    //   this.bottomWidth = n
    // }
  },
  mounted() {
    setInterval(() => {
      if (this.$refs.echarts_mains) {
        this.mainWidth = this.$refs.echarts_mains.clientWidth // mian宽
        this.mainHeight = this.$refs.echarts_mains.clientHeight
      }
      if (this.$refs.echarts_bottoms) {
        this.bottomWidth = this.$refs.echarts_bottoms.clientWidth // mian宽
        this.bottomHeight = this.$refs.echarts_bottoms.clientHeight // mian宽
      }
    }, 500)
    this.getReportData()
    // if (this._allWarnEcharts && this._separateEcharts) {
    //   window.addEventListener('resize', function() {
    //     this._allWarnEcharts.resize()
    //     this._separateEcharts.resize()
    //   })
    // }
    this.electricMax = this.lowElectric + this.midElectric + this.highElectric // 改完接口删
    this.getdeviceData()
    this.initApi()
  },
  methods: {
    getdeviceData() {
      get_device_list({
        size: this.listquery.size,
        page: this.listquery.page
      }).then((res) => {
        console.log(res)
        if (res.status === 200) {
          this.tableData = res.data
        }
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listquery.page = val
      this.getdeviceData()
    },
    initApi() {
      get_all_device().then((res) => {
        this.deviceTop.deviceNum = res.data.filter((it) => {
          return it.name === '设备总数'
        })[0].count
        this.deviceTop.deviceOnline = res.data.filter((it) => {
          return it.name === '在线设备数'
        })[0].count
        this.deviceTop.deviceUnline = res.data.filter((it) => {
          return it.name === '离线设备数'
        })[0].count
      }),
      get_error_by_day({
        startTime: new Date().getTime()
      }).then((res) => {
        this.warningData = res.data
        this.deviceTop.warring = this.warningData[this.warningData.length - 1].count
      })
    },
    getReportData() {
      //   getReport({
      //     size: 5,
      //   }).then((res) => {
      //     this.warnNum = res.data.numVo.warningNum;
      //     this.equipmentNum = res.data.numVo.deviceNum;
      //     this.sceneNum = res.data.numVo.sceneNum;
      //     this.lowElectric = res.data.batteryVo.minNum;
      //     this.midElectric = res.data.batteryVo.num;
      //     this.highElectric = res.data.batteryVo.maxNum;
      //     this.electricMax =
      //       this.lowElectric + this.midElectric + this.highElectric; // 最大电量设备
      //     this.sort(res.data.weekVoList);
      //     this.online = res.data.conDevice.online;
      //     this.unline = res.data.conDevice.offline;
      //   });
    },
    sort(data) {
      const newData = data.sort((a, b) => {
        return b.sceneNum - a.sceneNum
      })
      const newThreedata = newData.splice(0, 3)
      this.warnList = newThreedata
      this.numMax =
        Number(this.warnList[0].sceneNum) + this.warnList[0].sceneNum / 2 // 最大告警
    },
    allWarnEcharts(data) {
      this._allWarnEcharts = data
    },
    separateEcharts(data) {
      this._separateEcharts = data
      //   window.onresize = this._separateEcharts.resize
    }
  }
}
</script>
<style lang="scss" scoped>
.right-menu {
  position: fixed;
  top: 0;
  right: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 0.8rem;
  z-index: 2;

  .addButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.56rem;
    height: 0.46rem;
    background: rgba(10, 210, 57, 0.6);
    border: 1px solid rgba(10, 210, 57, 1);
    border-radius: 0.23rem;
    cursor: pointer;

    span {
      font-size: 0.16rem;
      color: #fff;
      letter-spacing: 0.02rem;
    }
  }
}

html body #report {
  position: absolute;
  height: 100%;
  width: 100%;
  //   height: calc(100vh - 80px);
  padding: 1% 3.8% 1.5% 3.3%;
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-color: rgb(234, 241, 247);
  #left {
    // background: yellow;
    width: 67.3%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-flow: column;

    .l_header {
      height: 16.1%;
      // background:red;
      display: flex;
      justify-content: space-between;

      // min-height: 80px;
      .l_box {
        height: 100%;
        width: 30%;
        border-radius: 0.14rem;
        position: relative;
        // min-width: 150px;
        background-color: #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .box_img {
          height: 100%;
          width: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 0.6rem;
          }
        }
        .box_right {
          width: 60%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .box_num {
            font-size: 0.5rem;
            font-family: DIN;
            font-weight: bold;
            // color: #ea5452;
          }
          .box_font {
            font-size: 0.2rem;
            font-family: PingFangSC;
            font-weight: 400;
            color: #263444;
          }
        }
        p.number {
          font-size: 2.5vw;
          font-family: PingFang SC;
          // font-family:DIN;
          font-weight: bold;
          color: rgba(255, 255, 255, 1);
          position: absolute;
          left: 10%;
          bottom: 40%;
          margin: 0;
        }

        p.ge {
          font-style: normal;
          font-family: PingFang SC;
          font-size: 0.8vw;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          position: absolute;
          left: 33%;
          bottom: 45%;
          margin: 0;
        }

        p.box_title {
          font-size: 0.8vw;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          position: absolute;
          bottom: 12%;
          left: 12%;
        }
      }

      .box1 {
        // background-image: url("~@/assets/pic/blue@2x.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #ea5452;
        .box_img {
          background-color: #ea5452;
        }
      }

      .box2 {
        // background-image: url("~@/assets/pic/green@2x.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #42be42;
        .box_img {
          background-color: #42be42;
        }
      }

      .box3 {
        // background-image: url("~@/assets/pic/orange@2x.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #578afb;
        .box_img {
          background-color: #578afb;
        }
      }
    }

    .l_main {
      height: 80%;
      background: #fff;
      border-radius: 0.2rem;
      padding: 2.5% 3.3% 2% 4.3%;

      .l_mainTitle {
        height: 10%;
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        align-content: center;
        align-items: center;

        p {
          margin: 0;
          font-size: 0.18rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #263444;
        }

        .l_mainDowm {
          width: 1.5vw;
          z-index: 9999;
          cursor: pointer;

          img {
            width: 100%;
          }
        }
      }
      .l_main_content {
        width: 100%;
        height: 90%;
        .fanye {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .echarts_main {
        width: 100%;
        height: 80%;
        margin-left: -10%;
        margin-top: -3%;
        // background:#00ccff;
      }
    }
  }
  .echarts_main {
    width: 90%;
    height: 80%;
    margin-left: -3%;
    margin-top: -16%;
    // background:#00ccff;
  }
  #right {
    // background:green;
    // margin-left:1.5%;
    width: 30.8%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-flow: column;

    .r_header {
      height: 28%;
      // background:red;
      background: #fff;
      box-shadow: 0 0.32rem 0.39rem 0.12rem rgba(19, 26, 37, 0.07);
      border-radius: 0.2rem;
      // min-width: 300px;

      p {
        margin: 0;
        margin-top: 5%;
        margin-left: 5%;

        font-size: 0.18rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #263444;
      }

      div.r_allProgress {
        margin-top: 8%;
        margin-left: 5%;
        display: flex;
        flex-direction: column;
        height: 50%;
        justify-content: space-between;

        div.Progress {
          margin: 0 20px;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          .progressCenter {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
          }
          .Progress_right {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
          }

          i {
            float: left;
            font-style: normal;
            font-weight: bold;
            font-size: 1vw;
            margin-right: 8%;
          }
          i.index_0 {
            color: rgba(255, 106, 0, 1);
          }
          i.index_1 {
            color: #0073e8;
          }
          i.index_2 {
            color: #0ad239;
          }

          p.progress_name {
            margin: 0;
            color: #263444;
            font-size: 0.2rem;
            margin-right: 10%;
          }

          .r_pro {
            width: 50%;
            // margin-top:10px;
            margin-right: 2%;
          }

          p.progress_num {
            font-size: 0.15rem;
            font-family: DIN;
            font-weight: bold;
            font-style: normal;
            margin: 0;
          }
          p.num_0 {
            color: rgba(255, 106, 0, 1);
          }
          p.num_1 {
            color: #0073e8;
          }
          p.num_2 {
            color: #0ad239;
          }
        }
      }

      .noScene {
        text-align: center;
        margin-top: 0.7rem;
        font-size: 0.22rem;
        color: rgba(169, 184, 226, 1);
      }
    }

    .r_main {
      height: 45%;
      background: #fff;
      box-shadow: 0px 0.32rem 0.39rem 0.12rem rgba(19, 26, 37, 0.07);
      border-radius: 0.2rem;

      // background:#00ccff;
      p.title {
        margin: 0;
        margin-top: 5%;
        margin-left: 5%;
        margin-bottom: 5%;
        font-size: 0.18rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #263444;
      }

      .r_mainAll {
        width: 65.8%;
        height: 6vw;
        margin:50px auto  0;
        display: flex;
        flex-flow: row;
        justify-content: space-between;

        .r_mainBox {
          width: 6vw;
          text-align: center;
          height: 100%;

          p {
            margin: 0;
            line-height: 6vw;
            font-size: 0.38rem;
            font-family: DIN;
            font-weight: bold;
          }

          p.orange {
            color: rgba(255, 106, 0, 1);
          }

          p.green {
            color: rgba(10, 210, 57, 1);
          }
        }

        div.orange {
          background-image: url("~@/assets/pic/sphere_orange@2x.png");
          background-size: 100% 100%;
        }

        div.green {
          background-image: url("~@/assets/pic/sphere_green@2x.png");
          background-size: 100% 100%;
        }
      }

      .r_mainTitle {
        width: 65.8%;
        margin: 0 auto;
        margin-top: 3%;
        display: flex;
        flex-flow: row;
        justify-content: space-between;

        .r_mainonline {
          display: flex;
          width: 6vw;
          justify-content: center;

          div.radiusO {
            width: 0.8vw;
            height: 0.8vw;
            background: rgba(255, 106, 0, 1);
            border-radius: 50%;
          }

          div.radiusG {
            width: 0.8vw;
            height: 0.8vw;
            background: rgba(10, 210, 57, 1);
            border-radius: 50%;
          }

          i {
            font-style: normal;
            font-size: 0.8vw;
            font-family: PingFang SC;
            font-weight: 500;
          }

          i.orange {
            color: rgba(255, 106, 0, 1);
          }

          i.green {
            color: rgba(10, 210, 57, 1);
          }
        }
      }
    }

    .r_bottom {
      height: 45%;
      background: #fff;
      box-shadow: 0px 0.32rem 0.39rem 0.12rem rgba(19, 26, 37, 0.07);
      border-radius: 0.2rem;

      .r_bottomTitle {
        height: 20%;
        margin: 0;
        // margin:5% 0 5% 5%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        // margin-top: 5%;
        margin-left: 5%;
        // margin-bottom: 3%;
        font-size: 0.18rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #263444;
      }

      .eleAll {
        height: 80%;
        margin-left: 5%;
        margin-right: 8%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        // align-items: flex-start;

        .ele {
          margin-bottom: 8%;

          .ele_title {
            display: flex;
            flex-flow: row;
            justify-content: space-between;
            .ele_left {
              display: flex;
              flex-flow: row;
              justify-content: flex-start;
              width: 30%;
              align-items: center;
              .ele_radio {
                width: 0.8vw;
                height: 0.8vw;
                border-radius: 50%;
              }

              div.orange {
                background: rgba(255, 106, 0, 1);
              }

              div.blue {
                background: rgba(0, 115, 232, 1);
              }

              div.green {
                background: rgba(10, 210, 57, 1);
              }

              .ele_leftText {
                font-size: 0.8vw;
                font-family: DIN;
                font-weight: 400;
                margin-left: 10%;
              }

              .ele_orange {
                color: rgba(255, 106, 0, 1);
              }

              .ele_blue {
                color: rgba(0, 115, 232, 1);
              }

              .ele_green {
                color: rgba(10, 210, 57, 1);
              }
            }

            .ele_right {
              i {
                font-size: 0.8vw;
                font-family: DIN;
                font-weight: bold;
                font-style: normal;
              }

              i.orange {
                color: rgba(255, 106, 0, 1);
              }

              i.blue {
                color: rgba(0, 115, 232, 1);
              }

              i.green {
                color: rgba(10, 210, 57, 1);
              }
            }
          }

          .ele_progress {
            margin-top: 3%;
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
